<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>内部插入</title>
<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
<script type="text/javascript">
	$(function() {
		//1.append(content) 向每个匹配的元素内部追加内容。匹配元素内部如果有元素的情况，在存在的元素的后面追加。
		//这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
		$("p").append("<b>hello</b>");
		//2.append(function(index, html)) 向每个匹配的元素内部追加内容
		$("p").append(function(index, html) {
			if (index == 0) {
				return " world";
			}
		});
		//3.appendTo(content).把所有匹配的元素追加到另一个指定的元素元素集合中。
		//此操作具有破坏性，即，将appendTo前面的元素，添加到后面的元素中，而不是复制。
		$("p").appendTo("div");
		//$("<p>kevin</p>").appendTo("div").css("backgroundColor","red").end().css("backgroundColor","green");

		//4.prepend(contont) 向每个匹配的元素内部前置内容。
		$("p").prepend("<b>befor </b>");

		//5.prepend(function(index, html))
		//返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

		$("p").prepend(function(index, html) {
			return "前置"
		});

		//6.prependTo(content)
		//把所有匹配的元素前置到另一个、指定的元素元素集合中。
		$("#name").prependTo("#foo");
	});
</script>
</head>
<body>
	<p>I would like to say:</p>
	<hr>
	<div></div>
	<div></div>

	<h1 id="foo" style="font-size: 15">zheng</h1>
	<h2 id="name">kevin</h2>

</body>
</html>